<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/admin/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
          <el-breadcrumb-item>所有菜品</el-breadcrumb-item>
          <!-- <el-button @click="getAllusers(true)">get</el-button> -->
        </el-breadcrumb>
      <el-table
          :data="users_data.filter(data => !search ||
          data.food.toLowerCase().includes(search.toLowerCase()) ||
          data.price.toLowerCase().includes(search.toLowerCase()) ||
          data.stock.toString().toLowerCase().includes(search.toLowerCase()) ||
          data.type.toLowerCase().includes(search.toLowerCase()) ||
          data.status.toLowerCase().includes(search.toLowerCase()) ||
          data.seller_id.toString().toLowerCase().includes(search.toLowerCase()) ||
          data.seller_name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          height="600">
          <el-table-column
              label="菜品ID"
              sortable
              prop="id">
          </el-table-column>
          <el-table-column
            label="售卖商家ID"
            sortable
            prop="seller_id">
          </el-table-column>
          <el-table-column
            label="售卖商家"
            sortable
            prop="seller_name">
          </el-table-column>
          <el-table-column
              label="菜品名"
              sortable
              prop="food">
          </el-table-column>
          <el-table-column
              label="价格"
              sortable
              prop="price">
          </el-table-column>
          <el-table-column
              label="库存"
              sortable
              prop="stock">
          </el-table-column>
          <el-table-column
              label="类型"
              sortable
              prop="type">
          </el-table-column>
          <el-table-column
              label="状态"
              prop="status"
              :filters="[{ text: '上架', value: '上架' }, { text: '下架', value: '下架' }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end">
            <template slot-scope="{row}">
                <el-tag>{{ row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
        
              <template slot-scope="{row,$index}">
                <el-button class="btn" v-if="row.status_pass!='未审核'" size="mini" type="success" @click="handleModifyStatus(row,'未审核')">
                      已审核
                  </el-button>
                  <el-button class="btn" v-if="row.status_pass!='已审核'" size="mini" type="warning" @click="handleModifyStatus(row,'已审核')">
                      未审核
                  </el-button>  
                <el-button
                size="mini"
                type="danger"
                class="el-icon-delete"
                @click="handleDelete(index,row)"></el-button>  
              </template>
          
        </el-table-column>
      </el-table>
      <el-dialog >
        
      </el-dialog>
  </div>
  </template>
  <script>
  import axios from 'axios'
  export default {
    data() {
      return {
            users_data:[],
            users_data_show:[],
            currentPage:'',
            search: '',
            pageSize:10,
            users : [
              {
                  id:'0',
                  food:'牛肉面',
                  price:'15.0',
                  stock:'10',
                  type:'面条',
                  status:'上架',
                  seller_id:'5',
                  seller_name: 'KFC',
                  status_pass:'未审核' 
              },
              {
                  id:'1',
                  food:'盖浇饭',
                  price:'12.0',
                  stock:'11',
                  type:'米饭',
                  status:'下架',
                  seller_id:'5',
                  seller_name: 'KFC',
                  status_pass:'未审核' 
              }
          ]
      }
    },
    created() {
      this.getAllusers()
    },
    methods: {
      async getAllusers(search) {
              var query = {}
              axios.post(`/admin/allfoods`,query)
              .then((res) => { 
              this.collegeList = res.data;
              this.users_data = this.collegeList;
              this.currentPage = 1;
              var start = 0;
              var end = start + this.pageSize;
              this.users_data_show = this.users_data.slice(start, end)
              console.log(this.users_data)
              if (res.status !== 200) return this.$message.error('获取列表失败')
              })
      },
      handleModifyStatus(row, status) {
        console.log(row)
        this.$message({
          message: '操作Success',
          type: 'success'
        })
        row.status_pass = status
        var query = {}
        if(status === "已审核") {
          query = {id : row.id}
          axios.post('/admin/foodpass',query)
        }
      },
      filterStatus(value, row) {
          return row.status === value;
        },
          handleEdit(index, row) {
            console.log(index, row);
          },
          handleDelete(index,row) {
          console.log(row)
          var query = {
            food_id : row.id,
            seller_id:row.seller_id
        }
          // 弹框提示
          this.$confirm('此操作将永久删除该菜品, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(async () => {
              // 确定删除
              axios.post(`/admin/delfood`,query)
            .then((res) => { 
                if (res.status != 200)
                return this.$message({
                  type: 'error',
                  message: '删除失败!',
                })
                this.$message({
                type: 'success',
                message: '删除成功!',
                })
                // 刷新院系列表
                this.getAllusers()
            })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              })
            })
      },
     
    
    },
  }
  </script>
  <style lang="less" scoped>
  .delbtn {
    float: left;
    display: inline-block;
  }
  .btn {
    float: left;
    display: inline-block;
  }
  .select {
    width: 120px;
  }
  .pagination {
    margin-top: 15px;
  }
  </style>